<template>
  <div id="middleChart">
    <el-card class="box-card">
      <div class="box-bg"></div>
      <div class="box-container">
      <div slot="header" class="clearfix">
        <span>全市排名前20咖啡朝阳区占比</span>
      </div>
      <div class="chart">
        <ve-histogram :data="chartData" :legend-visible="false" :grid="grid" :extend="chartExtend"></ve-histogram>
      </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data: function() {
    this.chartExtend = {
      xAxis: {
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
              color: '#fff'
          }
        },
        axisLine:{
          show: true,
          lineStyle:{
            color:'rgb(0,251,255)',
            width: 2
          }
        }
      },
      yAxis:{
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff'
            }
        },
        splitLine: false
      },
    //   series: {
    //     itemStyle: {
    //       normal: {
    //         //颜色渐变
    //         color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //           { offset: 0, color: "rgba(0,162,136,1)" },
    //           { offset: 0.4, color: "rgba(121,189,143,1)" },
    //           { offset: 0.6, color: "rgba(190,235,159,1)" },
    //           { offset: 0.8, color: "rgba(255,255,162,1)" }
    //         ]),
    //       }
    //     }
    //   }
    };
    this.grid = {
      show: false,
      top: 20,
      bottom: 240
    };
    return {};
  },
  computed: {
    chartData() {
      return this.$store.getters.curChartData;
    }
  }
};
</script>

<style lang="stylus" scoped>
#middleChart {
  position: absolute;
  z-index: 9;
  width: calc(100% - 550px);
  height: 200px;
  left: 16px;
  bottom: 10px;

  .box-card {
    .chart {
      height: 150px;
    }
  }
}

.box-container {
  position: absolute;
  width: 100%;
  height: 100%;
  &>div:nth-child(1){
    color:#fff
    height:40px
    text-align center
    line-height 30px
    font-size 16px
    background url('../../assets/title_bg.png') no-repeat center bottom;
  }
}

.box-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('../../assets/panel_bg2.png') repeat-y;
  background-size: 100%;
}
</style>
